<template>

  <Row :gutter="8" type="flex">
    <Col flex="180px">

      <div class="box-sty">
        <h3>人员类型</h3>
        <Tabs tab-position="left" v-model:activeKey="queryParam.objectRoleType" @change="tabChange">
          <TabPane
              v-for="item in aptTypes"
              :key="item.code"
              :tab="item.itemName"
          ></TabPane>
        </Tabs>
      </div>

    </Col>
    <Col flex="auto">
      <div class="apt-table">
        <Form :wrapper-col="{ span: 16 }" class="pb20">
          <Row :gutter="[0, 0]">

            <Col :span="8">
              <FormItem label="人员姓名">
                <Input
                    v-model:value="queryParam.objectName"
                    placeholder="请输入人员姓名"
                />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="信用等级" v-if="colType==='11'">
                <Select placeholder="请选择信用等级" v-model:value="queryParam.level">
                  <Option value="">全部等级</Option>
                  <Option value="APP_XYPJ_XYDJ_0001">AAA级</Option>
                  <Option value="APP_XYPJ_XYDJ_0002">AA级</Option>
                  <Option value="APP_XYPJ_XYDJ_0003">A级</Option>
                  <Option value="APP_XYPJ_XYDJ_0004">B级</Option>
                  <Option value="APP_XYPJ_XYDJ_0005">C级</Option>
                </Select>
              </FormItem>
            </Col>
            <Col :span="8" class="text-right">
              <Button type="primary" ghost @click="handleReset">重置</Button>
              <Button type="primary" @click="handleSearch">立即查询</Button>
            </Col>
          </Row>
        </Form>
        <div class="tbr-border">
          <Table
              :dataSource="dataSource"
              :columns="columns"
              :loading="loading"
              :pagination="pagination"
              :rowKey="(dataSource,index) => index.toString()"
              @change="handleTableChange"
          >
            <template #num="{ index }">
            <span>{{
                (pagination.current - 1) * pagination.pageSize +
                parseInt(index) + 1
              }}</span>
            </template>
            <template #name="{ text, record }">
              <router-link v-if="record.objectId" target="_blank" :to="{path:`/staff/${record.objectId}`}" class="blue">{{ text }}</router-link>
              <span v-else>{{text}}</span>
            </template>

            <template #creditGrade="{ text }">
              <div class="level" :class="`level${creditLevelEnum[text]}`"></div>
            </template>
          </Table>
        </div>
      </div>
    </Col>
  </Row>


</template>


<script lang="ts" >
import { Tabs, Row, Col, Form, Input, Button, Table ,  Select } from "ant-design-vue";
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getAptScorePersonList , pageConfig , personTypes , aType } from '/@/api/public';
import { creditLevelEnum } from '/@/api/company';
import { getRegionProv } from "/@/api/pro";
import { parseTime } from '/@/utils';


interface queryConfig {
  area: string,
  level: string,
  objectCode: string,
  objectName: string,
  objectRoleType: string,
  current: number;
  size: number;
}
interface Option {
  regionCode: string;
  regionName: string;
  disabled?: boolean;
  children?: Option[];
  [key: string]: any;
}

export default defineComponent({
  name: "aptNotice",
  components: {
    Tabs,
    TabPane: Tabs.TabPane,
    TabContent: Tabs.TabContent,
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Input,
    Button,
    Table,
    Select,
    Option: Select.Option
  },
  setup() {
    const aptTypes = ref<aType[]>(personTypes);
    const { params } = toRefs(useRoute());
    const dataSource = ref<unknown[]>([])
    const colType:string =  params.value.type as string;
    const value = ref<string[]>([]);
    const options=ref<Option[]>([]);
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })

    const loading = ref<boolean>(true);
    let queryParam = reactive<queryConfig>({
      area: '',
      level: colType==='11'?'':'APP_XYPJ_XYDJ_0005',
      objectCode: "",
      objectName: "",
      objectRoleType: "APP_XYPJ_TYPE_ZJ",
      current: 1,
      size: 10
    })

    const tabChange = () => {
      getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }

    const getTableList = async () => {
      loading.value = true;
      let data = await getAptScorePersonList(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records;
      loading.value = false;
    }



    const handleSearch = async () => {
      queryParam.current = 1;
      paginationRef.value.current =  1;
      await getTableList();
    }

    const handleReset = () => {
      paginationRef.value.current =  1;
      value.value = [];
      Object.assign(queryParam,{
        area: '',
        level: colType==='11'?'':'APP_XYPJ_XYDJ_0005',
        objectCode: "",
        objectName: "",
        current: 1
      })
      getTableList();
    }
    const methodRegion = async () => {
      const data = await getRegionProv({code:65});
      options.value = data[0].children
    }

    onMounted(() => {
      methodRegion();
      getTableList();
    });

    const columns = [
      {
        title: "序号",
        align:"center",
        slots: { customRender: 'num' }
      },
      {
        title: "人员姓名",
        width: 140,
        dataIndex: "objectName",
        slots: { customRender: 'name' }
      },
      {
        title: "身份证号",
        width: 200,
        dataIndex: "objectCode"
      },
      {
        title: "上年度信用等级",
        align:'center',
        dataIndex: "lastCreditGrade"
      },
      {
        title: "本年度信用评分",
        align:'center',
        dataIndex: "creditScore",
      },
      {
        title: "本年度信用等级",
        dataIndex: "creditGrade",
        align: 'center',
        className: colType !== "11" ? "notshow" : "",
        slots: { customRender: 'creditGrade' }
      }
    ]

    return {
      aptTypes, queryParam, dataSource, columns, loading, pagination: paginationRef ,creditLevelEnum,colType,
      parseTime, tabChange, getTableList, handleSearch, handleReset, handleTableChange
    };

  },
});
</script>
<style lang="less" scoped>


::v-deep(.ant-table){
  .ant-table-body {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }

  .ant-table-placeholder {
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
  }
}

::v-deep(.ant-row){
  .ant-col-6.text-right{
    padding-top: 4px !important;
  }
}

::v-deep(.ant-tabs){
  .ant-tabs-left-bar{
    width: 100%;
  }
}

</style>


